<!--
 * @Author: gaolulu 1402328525@qq.com
 * @Date: 2024-08-30 16:55:08
 * @LastEditors: gaolulu 1402328525@qq.com
 * @LastEditTime: 2024-09-06 11:07:01
 * @FilePath: \insurance_policy_inspect_h5\src\components\operationalGuideline\operatinGui.vue
 * @Description: 工作台paid端   操作指引  页面样式适配 抽出组件
-->
<template>
  <!-- 操作指引 paid -->
     <div class="neironhquyuout"  :style="showStyle">
        <div class="borderOut">
          <div class="neironhquyu" >
         <div  ref="myTask">
               <div class="title" v-if="num == 1">
                   <img :src="wdrw" alt="" />
                   <div>我的任务</div>
               </div>
               <!-- 展开数据 -->
               <div class='chdeTle' v-if="num == 1">
                   <div class="chdeTleCustomer">
                       <div class="chdeTleCustomerDv">
                           <div >已完成</div>
                           <div>20</div>
                       </div>
                       <img src="../../assets/yfx.png" alt="">
                   </div>
                   <div class="chdeTleCustomer"  >
                       <div class="chdeTleCustomerDv">
                           <div >进行中</div>
                           <div>3</div>
                       </div>
                       <img src="../../assets/yfx.png" alt="">
                   </div>
                   <div class="chdeTleCustomer"   >
                       <div class="chdeTleCustomerDv">
                           <div>失败</div>
                           <div>1</div>
                       </div>
                       <img src="../../assets/yfx.png" alt="">
                   </div>
               </div>
               <div class="title" ref="newCustomer" v-else-if="num == 2" >
                   <img :src="xkhyq" alt="" />
                   <div>新客户邀请</div>
               </div>
               <div class="title" ref="InviteAgain" v-else-if="num == 3" >
                   <img :src="cjwt" alt="" />
                   <div>常见问题</div>
               </div>
           </div>
         </div>
        </div>
    </div>
    <div class="pageBgT"  v-if="num == 1">
      <div class="pageBgTDv" :style="showTextStyle">
        <div class="pageBgTDv1">
          <img src="../../assets/img/workt/4.png" alt="" />
        </div>
        <div>
          点击“我的任务”各状态栏可查看您发起的所有任务的信息、状态及报告。
        </div>
        <div class="btn1c" @click="guideBottom()">
          <div>下一步({{ num }}/3)</div>
        </div>
      </div>
    </div>
    <div class="pageBgC"  v-else-if="num == 2">
      <div class="pageBgTDv" :style="showTextStyle">
        <div class="pageBgTDv1">
          <img src="../../assets/img/workt/4.png" alt="" />
        </div>
        <div>首次邀请客户请点击“新客户邀请”按钮。</div>
        <div class="btn1c" @click="guideBottom()">
          <div>下一步({{ num }}/3)</div>
        </div>
      </div>
    </div>
    <div class="pageBgD"  v-else-if="num == 3">
      <div class="pageBgTDv" :style="showTextStyle">
        <div class="btn1c3" @click="guideBottom()">
          <div>我知道了({{ num }}/3)</div>
        </div>
        <div>
          您在此处可以查看使用中的常见问题，点击下方问题名称，可直接进入问题详情。
        </div>
        
        <div class="pageBgTDv1" style="transform: scaleY(-1);">
          <img src="../../assets/img/workt/4.png" alt="" />
        </div>
       
      </div>
    </div>
</template>
<script lang="ts" setup>
import wdrw from "../../assets/wdrw.png";
import cjwt from "../../assets/cjwt.png";
import xkhyq from "../../assets/xkhyq.png";
const props = defineProps({
	num: {
		// 步骤
		default: 1,
    type: Number,
	},
	showStyle: {
		// 图片样式
		default: {},
    type: Object,
	},
	showTextStyle: {
		// 文字内容样式
		default: {},
    type: Object,
	},

})
const emits = defineEmits(['guideBottom'])
const guideBottom = () => {
    emits('guideBottom')
}
</script>
<style lang="less" scoped>
  .neironhquyuout{
    width: 184px;
    margin:12px;
    .borderOut{
      border-radius: 8px;
      border:2px dashed #fff;
      padding: 4px;
      .neironhquyu {
        width: 172px;
        padding: 6px 6px;
        display: flex;
        border-radius: 10px;
        align-items: center;
        background: #ffffff;
        flex-direction: column;
        justify-content: space-between;
        overflow: hidden;
        .title {
          width: 100%;
          height: 70px;
          display: flex;
          font-size: 15px;
          color: #333333;
          font-weight: bold;
          align-items: center;
          border-bottom: 2px solid #ececec;
          img {
            width: 19px;
            height: 19px;
          }
          div {
            margin-left: 10px;
          }
        }
        .primary {
            width: 90%;
            display: flex;
            // bottom: 30px;
            // position: absolute;
            align-items: center;
            justify-content: center;
            .primaryButtont {
                width: 100%;
                height: 90px;
                display: flex;
                border-radius: 10px;
                align-items: center;
                justify-content: center;
                background: rgba(31, 141, 247, .3);
                img {
                    width: 17px;
                    height: 17px;
                }
                .primaryButtont1 {
                    display: flex;
                    margin-bottom: 10px;
                    align-items: center;
                    justify-content: center;
                }
                p {
                    margin-top: 3px;
                }
            }
        }
        .chdeTle {
            .chdeTleCustomer {
                width: 100%;
                height: 70px;
                display: flex;
                align-items: center;
                justify-content: space-between;
                border-bottom: 2px solid #ececec;
                .chdeTleCustomerDv {
                    display: flex;
                    color: #333333;
                    margin-left: 30px;
                    align-items: center;
                    justify-content: center;
                    div:last-child{
                        width: 23px;
                        height: 23px;
                        display: flex;
                        font-size: 13px;
                        color: #198AFA;
                        margin-left: 10px;
                        border-radius: 50%;
                        align-items: center;
                        justify-content: center;
                        background: rgba(31, 141, 247, .3);
                    }
                    .projectListMg {
                        color: #198AFA;
                    }
                }
            }
        }
      }
   }
  }
  .pageBgT {
    .pageBgTDv {
      // top: 410px;
      top: 40vh;
      // left: 37%;
      // width: 355px;
      left: calc( 30% + 40px);
      width: calc( 70% - 80px);
      font-size: 13px;
      color: #ffffff;
      text-align: left;
      position: absolute;
      border-radius: 10px;
      .pageBgTDv1 {
        width: 100%;
        display: flex;
        justify-content: center;
        img{
          width: 70px;
          height: 80px;
          margin-bottom: 30px;
          margin-right: 30%;
        }
      }
    }
  }
  .pageBgC {
    .pageBgTDv {
      // top: 530px;
      top: 51vh;
      left: 37%;
      width: 355px;
      padding: 10px;
      font-size: 13px;
      color: #ffffff;
      text-align: center;
      position: absolute;
      border-radius: 10px;
      .pageBgTDv1 {
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        img{
          width: 70px;
          height: 80px;
          margin-right: 30%;
          margin-bottom: 30px;
        }
      }
    }
  }
  .pageBgD {
    .pageBgTDv {
      // top: 540px;
      top: 65vh;
      left: calc( 30% + 40px);
      width: calc( 70% - 60px);
      padding: 10px;
      font-size: 13px;
      color: #ffffff;
      text-align: left;
      position: absolute;
      border-radius: 10px;
      .pageBgTDv1 {
        width: 100%;
        display: flex;
        justify-content: center;
        img{
          width: 70px;
          height: 80px;
          margin-right: 30%;
          margin-bottom: 30px;
        }
      }
    }
  }
  .btn1c {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    div {
      width: 100px;
      height: 40px;
      display: flex;
      margin-top: 17px;
      align-items: center;
      border-radius: 20px;
      justify-content: center;
      border: 1px solid rgb(251, 250, 250);
    }
  }
  .btn1c3 {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    div {
      width: 100px;
      height: 40px;
      display: flex;
      margin-top: 17px;
      align-items: center;
      border-radius: 20px;
      justify-content: center;
      border: 1px solid rgb(251, 250, 250);
      margin-bottom: 16px;
    }
  }
</style>
